<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Slot content extend Demo</title>
</head>
<body>
    <h1>Slot content extend Demo</h1>
    <hr>
    <div id="app">
    <jspang>
    	<!-- 传值占位，怎么写都行 -->
        <a slot="bolgUrl">{{jspangData.bolgUrl}}</a >    
        <a  slot="netName">{{jspangData.netName}}</a >    
        <a  slot="skill">{{jspangData.skill}}</a >    
    </jspang>
    </div>
<template id="tmp">
    <div>
        <p>博客地址：<slot name="bolgUrl"></slot></p>
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>
    </div>
</template>
    <script type="text/javascript">
        var jspang={
            template:'#tmp'
        }
        var app=new Vue({
            el:'#app',
            data:{
               jspangData:{
                   bolgUrl:'http://jspang.com',
                   netName:'技术胖',
                   skill:'Web前端'
               }
            },
            components:{
                "jspang":jspang
            }
        })
    </script>
</body>
</html>